<template>
	<view class="contant">
		<!-- 前三名数据 -->
		<view class="TopThree">
			<view class="second">
				<!-- u--image :src="huangguan"></u--image> -->
				<u--image :src="rankingList[1].headPortrait" width="130rpx" height="130rpx" shape="circle" class="headPortrait"></u--image>
				<u--text size= "12" :text="rankingList[1].name" align="center"></u--text>
				<u--text size= "12" :text="rankingList[1].integration" align="center"></u--text>
				<u--text size= "12" :text="rankingList[1].college" align="center"></u--text>
			</view>
			<view class="first">
				<u--image :src="rankingList[0].headPortrait" width="140rpx" height="140rpx" shape="circle" class="headPortrait"></u--image>
				<u--text size= "12" :text="rankingList[0].name" align="center"></u--text>
				<u--text size= "12" :text="rankingList[0].integration" align="center"></u--text>
				<u--text size= "12" :text="rankingList[0].college" align="center"></u--text>
			</view>
			<view class="third">
				<u--image :src="rankingList[2].headPortrait" width="120rpx" height="120rpx" shape="circle" class="headPortrait"></u--image>
				<u--text size= "12" :text="rankingList[2].name" align="center"></u--text>
				<u--text size= "12" :text="rankingList[2].integration" align="center"></u--text>
				<u--text size= "12" :text="rankingList[2].college" align="center"></u--text>
			</view>
		</view>
		<!-- 排行数据 -->
		<view v-for="(item,index) in rankingList" :key="index" class="rankingList">
			<u--text :text="item.number" lineHeight="100rpx" color="#A9A9A9"></u--text>
			<u--image :src="item.headPortrait" width="100rpx" height="100rpx" shape="circle"></u--image>
			<view>
				<u--text :text="item.name" lineHeight="50rpx"></u--text>
				<u--text :text="item.college" lineHeight="50rpx"></u--text>
			</view>
			<view class="integration">{{item.integration}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				//排行数据
				rankingList:[{
					number:1,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:2,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:3,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:4,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:6,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:7,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:8,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:9,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				},{
					number:10,
					headPortrait:"../../static/OIP-C.jpg",
					name: "敲代码",
					college: "电信学院",
					integration: 54
				}]
			}
		}
	}
</script>

<style lang="scss">
	.contant{
		padding: 20rpx;
		font-family: 'KaiTi','Times New Roman', Times, serif;
		background: linear-gradient(#F5F5F5,#778899);
	}
	//前三名样式
	.TopThree{
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}
	//第一名样式
	.first{
		margin-top: 25rpx;
	}
	//第二名样式
	.second{
		margin-top: 75rpx;
	}
	//第三名样式
	.third{
		margin-top: 125rpx;
	}
	.rankingList{
		height: 100rpx;
		display: flex;
		justify-content: space-start;
		padding: 13rpx;
		margin-top: 30rpx;
		box-shadow: 0px 0px 8px #d6d7d7;
		border-radius: 16rpx;;
		background-color: #FFFFFF;
	}
	//积分样式
	.integration{
		margin: 0rpx 50rpx 0rpx 330rpx;
		line-height: 100rpx;
		color: #FFA500;
	}
	//头像样式
	.headPortrait{
		border-radius: 50%;
		box-shadow: 0px 0px 10px #d5d5d6;
	}
</style>
